<template>
  <view>
    <uv-popup
      ref="bindRef"
      round="20rpx"
      :close-on-click-overlay="overlayClose"
      :z-index="zIndex"
      :mode="mode"
    >
      <view class="bind-content">
        <uv-text
          text="绑定手机"
          color="#212121"
          size="32rpx"
          align="center"
          margin="0 0 20rpx 0"
        />
        <uv-input
          v-model="bindFrom.phonenumber"
          placeholder="请输入手机号码"
          maxlength="11"
          border="none"
          clearable
          :custom-style="{
            backgroundColor: '#F2F2F2',
            borderRadius: '20rpx',
            padding: '16rpx',
            marginBottom: '40rpx',
          }"
        />
        <uv-input
          v-model="bindFrom.code"
          placeholder="请输入验证码"
          maxlength="6"
          border="none"
          clearable
          :customStyle="{
            backgroundColor: '#F2F2F2',
            borderRadius: '20rpx',
            padding: '16rpx',
            marginBottom: '100rpx',
          }"
        >
          <template v-slot:suffix>
            <uv-code
              ref="uCodeRef"
              @change="(text) => (tips = text)"
              seconds="60"
              change-text="X秒重新获取"
            />
            <uv-text @click="getCode" :text="tips" color="#4EA770" size="28rpx" />
          </template>
        </uv-input>
        <uv-button
          text="登录"
          color="#4EA770"
          :throttle-time="1000"
          :custom-style="{
            height: '80rpx',
            borderRadius: '20rpx',
          }"
          :custom-text-style="{
            fontSize: '28rpx',
            color: '#fff',
          }"
          @click="handleBind"
        />
        <view
          :style="{
            height: keyboardHeight + 'px',
          }"
        />
      </view>
    </uv-popup>
  </view>
</template>
<script setup>
import { ref, watch, onMounted } from "vue";
import { getSmsCode, postBindAccount } from "@/request/login.js";

const bindRef = ref(); // 绑定弹窗ref
const bindFrom = ref({
  phonenumber: "", // 手机号
  code: "", // 验证码
  wxCode: "", // 微信code
});
const uCodeRef = ref(); // 验证码组件ref
const tips = ref("获取验证码"); // 验证码文字
const keyboardHeight = ref(0); // 键盘高度

const props = defineProps({
  // 弹窗是否显示
  show: {
    type: Boolean,
    default: false,
  },
  // 微信code
  code: {
    type: String,
    default: "",
  },
  // 弹窗类型
  mode: {
    type: String,
    default: "bottom",
  },
  // 层级
  zIndex: {
    type: Number,
    default: 997,
  },
  // 点击遮罩关闭弹窗
  overlayClose: {
    type: Boolean,
    default: true,
  },
});

const emit = defineEmits(["update:show", "success"]);

onMounted(() => {
  // #ifdef APP-PLUS
  // 监听键盘的弹出事件
  uni.onKeyboardHeightChange((res) => {
    if (res.isKeyboardShow) {
      keyboardHeight.value = res.height;
    } else {
      keyboardHeight.value = 0;
    }
  });
  // #endif
});

watch(
  props,
  (v) => {
    if (v.show) {
      bindFrom.value.wxCode = v.code;
      openBind();
    } else {
      setTimeout(() => {
        closeBind();
      }, 0);
    }
  },
  { deep: true, immediate: true }
);

// 绑定手机号
const handleBind = () => {
  if (!verify()) return;
  postBindAccount(bindFrom.value).then((res) => {
    if (res.code == 200) {
      uni.setStorageSync("TOKEN", res.token);
      emit("success", res.token);
      emit("update:show", false);
    }
  });
};

// 获取验证码
const getCode = async () => {
  if (uCodeRef.value.canGetCode) {
    if (!verify("phonenumber")) return;
    const res = await getSmsCode("BIND_USER", bindFrom.value.phonenumber);
    if (res?.code == 200) {
      uni.showLoading({
        title: "正在获取验证码",
      });
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: "验证码已发送",
          icon: "none",
        });
        uCodeRef.value.start();
      }, 1000);
    }
  } else {
    uni.showToast({
      title: "倒计时结束后再发送",
      icon: "none",
    });
  }
};

// 验证
const verify = (value = null) => {
  const { phonenumber, code } = bindFrom.value;
  if (value) {
    if (!/^1[3456789]\d{9}$/.test(bindFrom.value[value])) {
      uni.showToast({
        title: "请输入正确的手机号",
        icon: "none",
      });
      return false;
    }
    return true;
  } else {
    if (!/^1[3456789]\d{9}$/.test(phonenumber)) {
      uni.showToast({
        title: "请输入正确的手机号",
        icon: "none",
      });
      return false;
    }
    if (!/^.{6}$/.test(code)) {
      uni.showToast({
        title: "请输入6位验证码",
        icon: "none",
      });
      return false;
    }
    return true;
  }
};

// 弹窗打开
const openBind = () => {
  bindRef.value.open();
};

// 弹窗关闭
const closeBind = () => {
  bindRef.value.close();
  bindFrom.value.phonenumber = "";
  bindFrom.value.code = "";
  bindFrom.value.wxCode = "";
  emit("update:show", false);
};
</script>
<style lang="scss" scoped>
.bind-content {
  padding: 30rpx 88rpx 60rpx 88rpx;
}
</style>
